<!--
 * @Description: .
 * @Version: 2.0
 * @Autor: zhangjx
 * @Date: 2023-05-26 14:59:23
 * @LastEditors: uphldjx 1373577124@qq.com
 * @LastEditTime: 2023-10-26 10:56:31
-->
<template>
	<BaseContainer style="--w-left-gap: 30rem">
		<template #left>
			<h3 class="label-title">
				当前数据总量: <span>{{ totalNum }}</span>
			</h3>
			<el-tabs v-model="deviceType">
				<el-tab-pane label="后台菜单" name="0"></el-tab-pane>
				<el-tab-pane label="移动端菜单" name="1"></el-tab-pane>
				<el-scrollbar max-height="75vh">
					<MenuTree ref="treeRef" :key="deviceType" :deviceType="deviceType" @operate="handleRefresh" @node-click="handleNodeClick"></MenuTree>
				</el-scrollbar>
			</el-tabs>
		</template>
		<div class="w-100" style="margin-top:60px" v-show="Object.keys(nowMenu).length>0">
			<el-row :gutter="20">
				<el-col :span="12">
					<el-card>
						<DetailPage v-if="activeTabs == 'detail'" v-bind="detailConfig" :deviceType="deviceType" :model="nowMenu"></DetailPage>
						<menuForm v-if="activeTabs == 'edit'" :nowMenu="nowMenu" :deviceType="deviceType" :key="reloadMenu" @refresh="handleRefresh"> </menuForm>
					</el-card>
				</el-col>
				<el-col :span="12" v-show="operateBtn.length>0">
					<el-card>
						<p>当前菜单包含操作权限</p>
						<div class="flex flex-wrap mt10">
							<el-tag v-for="item in operateBtn" :key="item.label" class="mr8 mt10" effect="plain" round>
								{{ item.label }}
								{{ item.permission }}
							</el-tag>
						</div>
					</el-card>
				</el-col>
			</el-row>
		</div>
	</BaseContainer>
</template>

<script setup lang="ts">
import menuForm from './menuForm/index.vue'
import MenuTree from './MenuTree/index.vue'
import DetailPage from '@/views/aplid/DetailPage/index.vue'
import { detailConfig } from './menuHooks'
import apiMod from '@/apiMod'
const reloadMenu = ref(0)
const totalNum = ref(0)
const deviceType = ref('0')
const treeRef = ref(null)
const nowMenu: any = ref({})
const nodeData: any = ref({})
const operateBtn = ref([])
const activeTabs = ref('detail')

const handleNodeClick = (node, data, type) => {
	if (node?.parentId == -1) {
		node.parentName = '根节点'
	}
	nowMenu.value = node
	nodeData.value = data
	activeTabs.value = type == 'edit' ? 'edit' : 'detail'
	operateBtn.value = node?.children?.filter((item) => item.type == 1)
}

const handleRefresh = (item?: any, type?: string) => {
	nextTick(() => {
		switch (type) {
			case 'edit':
				handleNodeClick(item.data, item.node, 'edit')
				reloadMenu.value = Math.random()
				break
			default:
				activeTabs.value = 'detail'
				break
		}
	})
}
onMounted(() => {
	apiMod.admin_sysMenu_count().then((res) => {
		totalNum.value = res.data
	})
})
</script>

<style scoped></style>
